<template>
	<div class="tool-title-box">
		<h3>辅助分割</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">背景颜色</div>
				<div class="info">{{activeComponent.data.bgColor}}</div>
				<div class="modify-box">
					<div class="color-box">
						<span @click="activeComponent.data.bgColor = ''">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.bgColor"></el-color-picker>
						</div>
					</div>
				</div>
			</div>
			<div class="item-box flex-style">
				<div class="title">分割间隙</div>
				<div class="block">
					<el-slider :show-input-controls="false" input-size="mini" :min="1" :max="1200" v-model="activeComponent.data.height" show-input></el-slider>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';
	export default {
		name: 'division-tool',
		setup() {
			const store = useStore();
			const state = reactive({
				
			});
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state)
			}
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
